<template>
	<view style="height: 100vh; background-color: #FFFFFF;">
		<u-navbar title-color="#FFFFFF" height="48" back-icon-color="#FFFFFF" :border-bottom="false" :is-fixed="true"
			:title="'演练信息详情'"></u-navbar>
		<uc-content :loading="loading">
			<view class="list-item">
				<view class="list-bottom">
					<view>演练名称:</view>
					<view>{{fireInfo.name}}</view>
				</view>
			</view>
			<view class="list-item">
				<view class="list-bottom">
					<view>所属企业:</view>
					<view>{{fireInfo.enterpriseName}}</view>
				</view>
			</view>
			<view class="list-item" v-if="this.fireInfo.fireAlarmName!=null">
				<view class="list-bottom" >
					<view >预警名称:</view>
					<view>{{fireInfo.fireAlarmName}}</view>
				</view>
			</view>
			<view class="list-item">
				<view class="list-bottom">
					<view>所属建筑:</view>
					<view>{{fireInfo.buildName}}</view>
				</view>
			</view>
			<view class="list-item">
				<view class="list-bottom">
					<view>详细地址:</view>
					<view>{{fireInfo.loaction}}</view>
				</view>
			</view>
			<view class="list-item">
				<view class="list-bottom">
					<view>演练确定时间:</view>
					<view>{{fireInfo.fireConfirmTime|dateFormat}}</view>
				</view>
			</view>
			<view class="list-item">
				<view class="list-bottom">
					<view>演练状态:</view>
					<view>{{fireInfo.fireExecutionStatus|drillStatus}}</view>
				</view>
			</view>
			<view v-if="hiddenButton">
				<u-button v-if="fireInfo.fireExecutionStatus!=2" @click="show=true" type="primary"
					style="margin: 24rpx;">结束演练</u-button>
			</view>

			<view class="u-m-t-20" v-if="hiddenButton">
				<u-tabs :list="tabList" :is-scroll="false" :current="current" @change="change"></u-tabs>
				<view>
					<view v-if="personList.length<1" style="margin-top: 20rpx;">
						<u-empty  text="人员反馈数据为空" mode="list"></u-empty>
					</view>
					<view v-else>
						<view class="list-item" v-for="(item,index) in personList" :key="index" @click="telItem(item)">
							<view class="list-top">
								<view class="list-left">姓名:{{ item.userName }}</view>
							</view>
							<view class="list-center u-line-3">
								<view>电话:{{ item.phone}}</view>
								<view>状态：{{item.feedbackStatus==0?'未反馈':'已反馈'}}</view>
								<view>点击拨打电话</view>
							</view>
							<view class="list-bottom"></view>
						</view>
					</view>
				</view>
			</view>
		</uc-content>
		<u-modal v-model="show" :content="content" :show-cancel-button="true" @cancel="show=false"  @confirm="confirm">
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				fireInfo: [],
				loading: false,
				ucId: '',
				content: "确定要结束本次演练吗？",
				current:0,
				tabList:[
					{
						name: '未反馈'
					},{
						name: '已反馈'	
					}
				],
				personList:[]
			}
		},
		computed:{
			hiddenButton(){
				let roleCode = this.$store.getters.roleCode;
				return roleCode=="XFZD-ADMIN"||roleCode=="XT-ADMIN"||roleCode=="ZD-ADMIN"||roleCode=="DD-ADMIN"||roleCode=="JW-ADMIN"||roleCode=="XZ-ADMIN"
			}
		},
		onLoad(e) {
			this.ucId = e.ucId
			console.log(1,this.$store.getters.roleCode)
		},
		onShow() {
			this.initView()
		},
		methods: {
			change(index) {
				this.current = index;
				this.getPerson(this.ucId,this.current)
			},
			initView() {
				this.loading = true
				this.fireInfo = {}
				this.pageNum = 0
				this.getFireInfo(this.ucId)
				if(this.hiddenButton){
					this.getPerson(this.ucId,0)
				}
			},
			getFireInfo(val) {
				this.utils.request("/api/app/fireInfo/getInFireInfoVo", {
					ucId: val
				}, "post", "app", true).then(res => {
					this.fireInfo = res.data
					this.loading = false
				}).catch(error => {
					this.loading = false
					console.log(error)
				})
			},
			telItem(val){
				window.native.OpenTel(val.phone)
			},
			// submit() {
			// 	this.utils.request("/api/app/fireInfo/generateFireFnishPutFire", {
			// 		ucId: this.ucId
			// 	}, "post", "app", true).then(res => {
			// 		this.initView()
			// 	}).catch(error => {
			// 		console.log(error)
			// 	})
			// },
			confirm() {
				this.utils.request("/api/app/fireInfo/generateFireFinishPutFire", {
					ucId: this.ucId
				}, "post", "app", true).then(res => {
					this.initView()
				}).catch(error => {
					console.log(error)
				})
			},
			//获取人员列表名单
			getPerson(val,type){
				this.utils.request("/api/app/fireInfo/getFireNoticeUserList", {
					fireId: val,status:type
				}, "post", "app", true).then(res => {
					this.personList = []
					this.personList = res.data
					console.log(res)
				}).catch(error => {
					console.log(error)
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../../uview-ui/libs/css/style.components.scss";

	.list-item {
		padding: 20rpx 40rpx;
		background-color: #fff;
		border-bottom: #999999 1px dashed;

		.list-bottom {
			display: flex;
			margin-top: 10rpx;
			font-size: 28rpx;
			justify-content: space-between;
			color: #333;
		}

		.list-center {
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #999999;
		}
	}

	content {
		padding: 24rpx;
		text-align: center;
	}
</style>
